<template>
  <view>
    <view
      @click="fabiao"
      style="
        position: fixed;
        z-index: 99999;
        right: 20px;
        bottom: 40px;
        width: 50px;
        height: 50px;
        border-radius: 50%;

        background-color: aquamarine;
        color: #fff;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      "
      >+</view
    >
    <view @click="tiaoa(item)" v-for="(item, idnex) in getData.data" :key="idnex">
      <uni-card>
        <view style="display: flex; justify-content: space-between">
          <view style="display: flex; align-items: center; margin-bottom: 20px">
            <image
              style="width: 30px; height: 30px"
              class="controls-play img"
              :src="item.logo?item.logo:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'"
            ></image>
            
            <text style="margin-left: 20px"> {{ item.name }}</text>
          </view>
          <view>
            <uni-dateformat :date="item.time"></uni-dateformat>
          </view>
        </view>
        <view >
          <text style="font-size: 18px; color: #000">{{ item.title }}</text>
          <p
            style="
              font-size: 16px;
              width: 100%;
              margin-top: 10px;
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; /* 在溢出时显示省略号 */
              white-space: nowrap; /* 防止文本换行 */
            "
          >
            {{ item.content }}
          </p>
        </view>
      </uni-card>
    </view>
  </view>
  <uni-popup ref="popup" type="bottom" background-color="#fff;">
    <view style="margin: 20px;z-index: 9999;">
      <uni-forms ref="form" :modelValue="data.formData" :rules="rrules">
        <uni-forms-item label="标题" name="title">
          <uni-easyinput
            type="text"
            v-model="data.formData.title"
            placeholder="请输入标题"
          />
        </uni-forms-item>
        <uni-forms-item label="问题描述" name="content">
          <input
            class="input"
            v-model="data.formData.content"
            type="text"
            placeholder="请输入问题描述"
          />
        </uni-forms-item>
      </uni-forms>
      <button @click="submit">发表</button>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import {useCounterStore} from "../../stores/counter";
import {xiznengtao, getengtao} from "../../api/login";
import {ref, reactive, computed} from "vue";
const counter = useCounterStore();
// 一个计算属性 ref
const token = computed(() => {
  return counter.token;
});
const rrules=reactive( {
	// 对name字段进行必填验证
	title: {
		// name 字段的校验规则
		rules:[
			// 校验 name 不能为空
			{
				required: true,
				errorMessage: '请填写标题',
			},
			// 对name字段进行长度验证
			{
				minLength: 3,
				maxLength: 5,
				errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
			}
		],
		// 当前表单域的字段中文名，可不填写
		label:'姓名',
		validateTrigger:'submit'
	}
})
let user: any = computed(() => {
  return counter.user;
});
const popup: any = ref(null);
const fabiao = () => {
  if (token.value) {
    popup.value.open("top");
  } else {
    uni.showToast({
      title: "请先登录！",
      icon: "error",
      duration: 1000,
    });

    setTimeout(() => {
      uni.switchTab({
        url: "../my/index",
      });
    }, 500);
  }
};

// 获取数据
let getData: any = reactive({data: []});
const getLun = async () => {
  const {data} = await getengtao();
  getData.data = data.data;
};
getLun();
const tiaoa = (e:any) => {

	
	
  uni.navigateTo({
    url: `/pages/xiang/index`,
    success: function (res: any) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit(
        "acceptDataFromOpenerPage",

        e
      );
    },
  });
};
const submit = () => {
  // {"logo":"http://tmp/YpWFwKsYaUUXcf676ace0a1ded5678a083c4df52f065.jpeg","name":"青铜时代"}

  form.value
    .validate()
    .then((res: any) => {
      data.formData.id =
        Math.floor(Math.random() * (1000000000 - 10000 + 1)) + 10000;
      user.value.logo
        ? (data.formData.logo = user.value.logo)
        : (data.formData.logo =null
            );
      user.value.name
        ? (data.formData.name = user.value.name)
        : (data.formData.name = "微信用户");
      console.log("表单数据信息：", data.formData);
      xiznengtao(data.formData).then((res: any) => {
        popup.value.close();
        getLun();
      });
    })
    .catch((err: any) => {
      console.log("表单错误信息：", err);
    });
};
const form: any = ref(null);

const data: any = reactive({
  // 表单数据
  formData: {
    title: "",
    content: "",
    time: new Date(),
  },
  rules: {
    // 对name字段进行必填验证
    name: {
      rules: [
        {
          required: true,
          errorMessage: "请输入标题",
        },
        {
          minLength: 3,
          maxLength: 20,
          errorMessage: "标题太短啦",
        },
      ],
    },
    // 对email字段进行必填验证
    email: {},
  },
});
</script>

<style scoped></style>
